<template>
	<div class="worldMap" ref='worldMap'>
		<div ref="worldMapChart" class="worldMapChart" style="width: 100%;height: 100%;"></div>
		<!-- <div class="mengbanImg"></div> -->
		<div class="showheng">
			<div class="showhengList">

				<span class="showhengListTit">跨境出口国</span>
				<div class="showhengListColor">
					<!-- <span class="shubiao1">0</span> -->
					<span class="heng1"></span>
					<!-- <span class="shubiao2">30</span> -->
				</div>
			</div>
			<div class="showhengList">
				<span class="showhengListTit">一带一路出口国</span>
				<div class="showhengListColor">
					<!-- <span class="shubiao1">0</span> -->
					<span class="heng2"></span>
					<!-- <span class="shubiao2">30</span> -->
				</div>
			</div>

		</div>


	</div>

</template>

<script>
	//引入json数据
	// import baiduJSON from '../../datas/baiduData'
	const worldCoordData = require('@/assets/js/worldCoordData.json')


	export default {
		name: 'worldMap',
		components: {

		},
		data() {
			return {

				chartWorld: null,
				worldExport: [],
				geoCoordMapWorld: worldCoordData,
			}
		},
		mounted() {
			var that = this;
			that.initWorldChart();
			// setInterval(function() {
			//   that.initWorldChart();
			// }, 30000)
		},
		methods: {
			// 千分位逗号隔开（,）that.commonFunction.formatNumberRgx(num)
			// 获取当前日期that.commonFunction.formatDate()
			// 获取明天that.commonFunction.getTomorrowDate();

			// 当前日期的下个月that.commonFunction.getNextMonth()
			// 当前日期的前一个月that.commonFunction.getPreMonth()
			// 获取当前日期的前一年的年月日that.commonFunction.getLastYearYestdy()
			initWorldChart() {
				var that = this;
				const WroldMap = that.$refs.worldMapChart;
				if (WroldMap) {
					that.chartWorld = that.$echarts.init(WroldMap);
					that.$myHttp.post("getWorldCityInfo")
						.then(function(data0) {

							if (data0.status == "200") {

								var worldName = [];
								var zzData = [
									[{
										name: '郑州'
									}, {
										name: '郑州',
										value: 0,
									}]

								];
								var geoCoordMap = {};
								console.log(data0.data.world_export,"1110n")
							
								if(data0.data.world_export&&data0.data.world_export.length>0){
										that.worldExport = data0.data.world_export;
										//存：
										localStorage.setItem('worldExport',JSON.stringify(that.worldExport));
										
								}else{
									//取：
									 that.worldExport  = JSON.parse(localStorage.getItem('worldExport'))||[];
								}
								if(that.worldExport.length>0){
									that.worldExport.forEach((item, index) => {
										if (item.NAME == '波兰'|| item.NAME == '白俄罗斯'|| item.NAME == '俄罗斯联邦'|| item.NAME == '乌克兰'||item.NAME == '哈萨克斯坦'||item.NAME == '乌兹别克斯坦'|| item.NAME == '俄罗斯联邦'||item.NAME == '加拿大' || item.NAME == '美国' || item.NAME == '巴西' || item.NAME == '日本'||item.NAME == '澳大利亚' ) {
											worldName.push(item.NAME);
											zzData.push([{
												name: '郑州'
											}, {
												name: item.NAME,
												value: item.TOTAL,
											}])
										}
										
									})
								}
								
								
								worldName.push('郑州');
								worldName.forEach((item, index) => {
									geoCoordMap[item] = [];
									geoCoordMap[item][0] = that.geoCoordMapWorld[item][0]
									geoCoordMap[item][1] = that.geoCoordMapWorld[item][1]
								})

								// 地图坐标需要转换，经过分析，经度小于-20度的加上360就可以了！
								for (var key in geoCoordMap) {
									if (geoCoordMap[key][0] < -20) {
										geoCoordMap[key][0] = geoCoordMap[key][0] + 360;
									}
								}
								var dtPath = "path://M514.284531 68.559469c-211.163327 0-382.343011 149.375076-382.343011 333.632613 0 139.493008 318.77523 556.336788 382.343011 556.052309 62.572104 0.283456 382.345058-418.429905 382.345058-556.052309C896.629589 217.935568 725.446835 68.559469 514.284531 68.559469zM514.284531 874.837772c-52.974515 0.23536-318.617641-356.402199-318.617641-472.64569 0-153.548118 142.649907-278.026154 318.617641-278.026154 175.968757 0 318.616618 124.477013 318.616618 278.026154C832.902172 516.881171 566.428122 875.074156 514.284531 874.837772zM514.284531 263.180028c-87.98489 0-159.310356 62.237483-159.310356 139.012054 0 76.773548 71.325465 139.0141 159.310356 139.0141 87.983867 0 159.310356-62.240553 159.310356-139.0141C673.594887 325.416488 602.269421 263.180028 514.284531 263.180028zM514.284531 485.5987c-52.79032 0-95.586009-37.340443-95.586009-83.406618 0-46.067198 42.795689-83.405595 95.586009-83.405595s95.584985 37.338397 95.584985 83.405595C609.869516 448.258257 567.074851 485.5987 514.284531 485.5987z";
								var convertData = function(data) {
									var res = [];
									for (var i = 0; i < data.length; i++) {
										var dataItem = data[i];
										var fromCoord = geoCoordMap[dataItem[0].name];
										var toCoord = geoCoordMap[dataItem[1].name];
										if (fromCoord && toCoord) {
											res.push({
												fromName: dataItem[0].name,
												toName: dataItem[1].name,
												coords: [fromCoord, toCoord]
											});
										}
									}
									return res;
								};

								var planePath =
									'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z';
								var color = ["#f0ff00", "#f0ff00", "#46bee9"];
								var series = [];
								var regions = [];
								// console.log()
								// var dataArr = [];
								// var dataArrNew = [];

								var delayFn = function(value) {
									if (value == 0) {
										return 0;
									}
									var max = 5000;
									var min = 0;
									var num = parseInt(Math.random() * (max - min + 1) + min, 10);
									return value * num;
								};
								
								

								[
									['郑州', zzData]
								].forEach(function(item, i) {
									item[1].map((dataItem, index) => {
										if (dataItem[1].name == "郑州") {
											regions.push({
												name: "China",
												selected: false,
												itemStyle: {
													areaColor: 'rgba(299,194,0,.9)',

													borderColor: '#fff',
													borderWidth: 3,
													shadowBlur: 25,
													shadowColor: '#fff',
													shadowOffsetX: 0,
													shadowOffsetY: 0,
													// shadowColor: 'rgba(0, 0, 0, 0.5)',

													// areaColor: '#b79706'
												}
											})
										}
									})
									var yidaiyilu =[];
									var putong =[];
									convertData(item[1]).forEach((item,index)=>{
										if(item.toName=='波兰'||item.toName=='白俄罗斯'||item.toName=='俄罗斯联邦'||item.toName=='乌克兰'||item.toName=='哈萨克斯坦'||item.toName=='乌兹别克斯坦'){
											yidaiyilu.push(item)
										}else{
											putong.push(item)
										}
										
									})
									series.push({
										name: item[0] + "对外外交航线",
										type: 'lines',
										zlevel: 1,
										effect: {
											show: true,
											period:4,
											loop: true,
											delay: delayFn,
											trailLength: 0.6,
											color: '#fff',
											symbolSize: 4,

										},
										lineStyle: {
											normal: {
												color: color[i],
												width: 0,
												curveness: 0.2
											}
										},
										data: yidaiyilu
									}, 
									{
										name: item[0] + "对外外交航线",
										type: 'lines',
										zlevel: 2,
										symbol: ['none', 'arrow'],
										effect: {
											show: true,
											period: 2,
											trailLength: 0,
											// symbol: planePath,
											symbol: 'none',
											symbolSize: 2
										},
										lineStyle: {
											color: color[i],
											width: 1,
											opacity: 0.6,
											curveness: 0.2
										},
										data: yidaiyilu
									}, {
										name: item[0] + "对外外交航线",
										type: 'lines',
										zlevel: 1,
										effect: {
											show: true,
											period:10,
											loop: true,
											delay: delayFn,
											trailLength: 0.6,
											color: '#fff',
											symbolSize: 4,

										},
										lineStyle: {
											normal: {
												color: color[i],
												width: 0,
												curveness: 0.2
											}
										},
										data: putong
									}, 
									{
										name: item[0] + "对外外交航线",
										type: 'lines',
										zlevel: 2,
										symbol: ['none', 'arrow'],
										effect: {
											show: true,
											period: 2,
											trailLength: 0,
											// symbol: planePath,
											symbol: 'none',
											symbolSize: 2
										},
										lineStyle: {
											color:'#0effeb',
											width: 1,
											opacity: 0.6,
											curveness: 0.2
										},
										data: putong
									}, 
									{
										name: '',
										type: 'effectScatter',
										coordinateSystem: 'geo',
										zlevel: 2,
										rippleEffect: {
											brushType: 'stroke',
											period: 0
										},

										label: {
											show: true,
											backgroundColor: 'rgba(0, 0, 0, 0.5)', //  #2dfdfd
											padding:[ that.commonFunction.fontSize(0.06), that.commonFunction.fontSize(0.02), that.commonFunction.fontSize(0.06), that.commonFunction.fontSize(0.02)],
											// borderColor: 'black',
											// borderColor: '#Fdd000',
											borderWidth: 0.5,
											borderRadius: that.commonFunction.fontSize(0.04),
											fontSize:that.commonFunction.fontSize(0.14),
											formatter: function(params) {
												var myvalue = that.commonFunction.formatNumberRgx(
													params.value[2]);
												if (params.name != "郑州") {
													var txthtml = ''
													if(params.name == "波兰" || params.name == "乌克兰" || params.name == "白俄罗斯" || params.name == "哈萨克斯坦" || params.name == "乌兹别克斯坦"|| params.name == "俄罗斯联邦"){
														
														
														txthtml = '{cN|' + params.name + '} \n '
														
													}else{
														txthtml = '{countryName|' + params.name + '} \n ' 
															console.log(params.name)
													}
													return  txthtml + '{hr|} \n {countryValue|出口单量: }' +
															'{v2|' + myvalue + '}' +
															'{v3| 包}';
													
												} else {
													return params.name;
												}

											},
											// fontSize:that.commonFunction.fontSize(0.2),
											position: 'right',
											offset: [-that.commonFunction.fontSize(0.05), -that
												.commonFunction.fontSize(0.3)
											],
											rich: {
												cN: {
													color: '#Fdd000',
													// color: '#36ffcb',
													align: 'center',
													fontWeight: 'bold',
													fontSize: that.commonFunction.fontSize(0.12),
												},
												countryName: {
													// color: '#Fdd000',
													color: '#36ffcb',
													align: 'center',
													fontWeight: 'bold',
													fontSize: that.commonFunction.fontSize(0.12),
												},
												hr: {
													borderColor: '#007ffe',

													width: '93%',
													borderWidth: 0.5,
													height: 0
												},
												countryValue: {
													// color: '#f0ff00',
													color: '#ffffff',
													align: 'center',
													fontSize: that.commonFunction.fontSize(0.1)
												},
												v2: {
													// color: '#Fdd000',
													color: '#ffffff',
													fontWeight: 'bold',
													fontSize: that.commonFunction.fontSize(0.12)
												},
												v3: {
													// color: '#f0ff00',
													color: '#ffffff',
													align: 'center',
													fontSize: that.commonFunction.fontSize(0.1)
												}
											}
										},
										symbolSize: [that.commonFunction.fontSize(0.2), that
											.commonFunction
											.fontSize(0.18)
										],
										symbol: function(value, params) {
											///
											if (params.data.name == "波兰") {
												// return "image://static/img/country/bolan.png"
												return dtPath;
											} else if (params.data.name == "白俄罗斯") {
												// return "image://static/img/country/baieluosi.png"
												return dtPath;
											} else if (params.data.name == "乌克兰") {
												// return "image://static/img/country/wukelan.png"
												return dtPath;
											} else if (params.data.name == "哈萨克斯坦") {
												// return "image://static/img/country/hasakesitan.png"
												return dtPath;
											} else if (params.data.name == "乌兹别克斯坦") {
												// return "image://static/img/country/wuzibiekesitan.png"
												return dtPath;
											} else if (params.data.name == "加拿大") {
												return "image://static/img/country/canada.png"
											} else if (params.data.name == "美国") {
												return "image://static/img/country/america.png"
												
											} else if (params.data.name == "巴西") {
												return "image://static/img/country/baxi.png"
											} else if (params.data.name == "意大利") {
												return "image://static/img/country/yidali.png"
											} else if (params.data.name == "英国") {
												return "image://static/img/country/england.png"
											} else if (params.data.name == "俄罗斯联邦") {
												// return "image://static/img/country/russia.png"
												return dtPath;
											} else if (params.data.name == "日本") {
												return "image://static/img/country/japan.png"
											} else if (params.data.name == "澳大利亚") {
												return "image://static/img/country/australia.png"
											} else if (params.data.name == "比利时") {
												return "image://static/img/country/bilishi.png"
											} else if (params.data.name == "瑞典") {
												return "image://static/img/country/ruidian.png"
											} else if (params.data.name == "匈牙利") {
												return "image://static/img/country/xiongyali.png"
											} else {
												return "image://static/img/country/china.png"
											}
											
											// else if (params.data.name == "南非") {
											// 	return "image://static/img/country/nanfei.png"
											// }
										},
										// symbol:'image://../../../static/img/country/canada.png',

										itemStyle: {
											color: color[i]
										},

										data: item[1].map(function(dataItem) {
											if (dataItem[1].name == "波兰") {
												return {
													name: dataItem[1].name,
													value: geoCoordMap[dataItem[1].name]
														.concat([
															dataItem[1].value
														]),
														symbolSize:[that.commonFunction.fontSize(.16),that.commonFunction.fontSize(.16)],
													label: {
														position: 'left',
														offset: [that.commonFunction.fontSize(
																0.1),
															that.commonFunction.fontSize(
																0)
														],
													},
												};
											} else if (dataItem[1].name == "白俄罗斯") {
												return {
													name: dataItem[1].name,
													value: geoCoordMap[dataItem[1].name]
														.concat([
															dataItem[1].value
														]),
														symbolSize:[that.commonFunction.fontSize(.16),that.commonFunction.fontSize(.16)],
													label: {
														position: 'left',
														offset: [that.commonFunction.fontSize(
																0.4),
															-that.commonFunction.fontSize(
																0.5)
														],
													},
												};
											}else if (dataItem[1].name == "乌克兰") {
												return {
													name: dataItem[1].name,
													value: geoCoordMap[dataItem[1].name]
														.concat([
															dataItem[1].value
														]),
														symbolSize:[that.commonFunction.fontSize(.16),that.commonFunction.fontSize(.16)],
													label: {
														position: 'left',
														offset: [that.commonFunction.fontSize(
																0.6),
															that.commonFunction.fontSize(
																0.5)
														],
													},
												};
											}else if (dataItem[1].name == "哈萨克斯坦") {
												return {
													name: dataItem[1].name,
													value: geoCoordMap[dataItem[1].name]
														.concat([
															dataItem[1].value
														]),
														symbolSize:[that.commonFunction.fontSize(.16),that.commonFunction.fontSize(.16)],
													label: {
														position: 'left',
														offset: [that.commonFunction.fontSize(
																0.4),
															-that.commonFunction.fontSize(
																0.4
																)
														],
													},
												};
											}else if (dataItem[1].name == "乌兹别克斯坦") {
												return {
													name: dataItem[1].name,
													value: geoCoordMap[dataItem[1].name]
														.concat([
															dataItem[1].value
														]),
														symbolSize:[that.commonFunction.fontSize(.16),that.commonFunction.fontSize(.16)],
													label: {
														position: 'left',
														offset: [that.commonFunction.fontSize(
																0.7),
															that.commonFunction.fontSize(
																0.4)
														],
													},
												};
											} else if (dataItem[1].name == "俄罗斯联邦") {
												return {
													name: dataItem[1].name,
													value: geoCoordMap[dataItem[1].name]
														.concat([
															dataItem[1].value
														]),
														symbolSize:[that.commonFunction.fontSize(.16),that.commonFunction.fontSize(.16)],
													label: {
														position: 'left',
														offset: [that.commonFunction.fontSize(
																1.2),
															-that.commonFunction.fontSize(
																0.4)
														],
													},
												};
											} else if (dataItem[1].name == "英国") {
												return {
													name: dataItem[1].name,
													value: geoCoordMap[dataItem[1].name]
														.concat([
															dataItem[1].value
														]),
													label: {
														position: 'left',
														offset: [that.commonFunction.fontSize(
																0.68), -that.commonFunction
															.fontSize(0.3)
														],
													},
												};
											} else if (dataItem[1].name == "意大利") {
												return {
													name: dataItem[1].name,
													value: geoCoordMap[dataItem[1].name]
														.concat([
															dataItem[1].value
														]),
													label: {
														position: 'center',
														offset: [-that.commonFunction.fontSize(
																0.3), that.commonFunction
															.fontSize(
																0.2)
														],
													},
												};
											} else if (dataItem[1].name == "匈牙利") {
												return {
													name: dataItem[1].name,
													value: geoCoordMap[dataItem[1].name]
														.concat([
															dataItem[1].value
														]),
													label: {
														offset: [that.commonFunction.fontSize(
																0.05), that.commonFunction
															.fontSize(0.05)
														],
													},
												};
											} else if (dataItem[1].name == "美国") {
												return {
													name: dataItem[1].name,
													value: geoCoordMap[dataItem[1].name]
														.concat([
															dataItem[1].value
														]),
													label: {
														offset: [that.commonFunction.fontSize(
																0.05), that.commonFunction
															.fontSize(0.05)
														],
													},
												};
											} else if (dataItem[1].name == "巴西") {
												return {
													name: dataItem[1].name,
													value: geoCoordMap[dataItem[1].name]
														.concat([
															dataItem[1].value
														]),
														
													symbolSize:[that.commonFunction.fontSize(.16),that.commonFunction.fontSize(.16)],
													label: {
														offset: [-that.commonFunction.fontSize(
																.6),
															that.commonFunction.fontSize(
																.4)
														],
													},
												};
											} else if (dataItem[1].name == "加拿大") {
												return {
													name: dataItem[1].name,
													value: geoCoordMap[dataItem[1].name]
														.concat([
															dataItem[1].value
														]),
													label: {
														offset: [-that.commonFunction.fontSize(
																.4),
															-that.commonFunction.fontSize(
																.4)
														],
													},
												};
											} else {
												return {
													name: dataItem[1].name,
													value: geoCoordMap[dataItem[1].name]
														.concat([
															dataItem[1].value
														]),
													// label: {
													// 	offset: [-that.commonFunction.fontSize(
													// 			.6),
													// 		that.commonFunction.fontSize(
													// 			.4)
													// 	],
													// },
												};
											}

										})
									}, );
								});

								const option = {
									title: {
										// text: '保税跨境9610出口实时动态图',
										left: 'center',

										textStyle: {
											color: "#fff",
											fontWeight: "normal",
											fontSize: that.commonFunction.fontSize(0.28),
											lineHeight: that.commonFunction.fontSize(1.8),
										}
									},
									geo: {
										map: "world",
										aspectScale: .68,
										label: {
											show: false,
										},
										roam: false, //是否允许缩放
										zoom: 1, //视角缩放比例
										layoutCenter: ["53%", "58%"], //地图位置
										layoutSize: that.commonFunction.fontSize(9),
										itemStyle: {
											normal: {
												// color: 'transparent', //地图背景色
												color: 'rgba(36,179,198,.5)', //地图背景色
												// borderColor:'transparent',
												// areaColor: {
												// 	x: 0,
												// 	y: 0,
												// 	x2: 0,
												// 	y2: 1,
												// 	colorStops: [{
												// 		offset: 0,
												// 		// color: '#073684' ,// 0% 处的颜色
												// 		color: '#41818a' // 0% 处的颜色
												// 	}, {  
												// 		offset: 1,
												// 		  // #24b3c6  #47c2d3 #47daee #6deeff  #a7f4ff
												// 		color: '#13282b' // 100% 处的颜色
												// 		// color: '#061E3D' // 100% 处的颜色
												// 	}],
												// },
												//color: ['orangered','yellow','lightskyblue']
												borderColor: "transparent" //省市边界线
												// borderColor: "#5bc1c9" //省市边界线
											},
											emphasis: {
												show: false,
												// color: "rgba(37, 43, 61, .5)" ,//悬浮背景
												// color: '#3066ba',

											}
										},
										regions: regions,
									},
									series: series
								};
								
								that.chartWorld.setOption(option);
								window.addEventListener("resize", function() {
									that.chartWorld.resize()
								})

							} else {
								alert("数据请求错误")
							}

						})
						.catch(function(error) {
							// alert(error)
						})
				}


			},


		}
	}
</script>

<style scoped>
	.worldMap {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
	}

	.worldMapChart {
		width: 100%;
		height: 100%;
		/* background: url(../../../../static/img/map.png) no-repeat center center;
		background-size: 100% 100%; */

	}

	/* .anchorBL {
		display: none !important
	} */

	.showheng {
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		bottom: .3rem;
		left: 0;
		right: 0;
		margin: 0 auto;
	}

	.showhengList {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.showhengList:nth-last-child(1) {
		margin-left: 1rem;
	}

	.showhengListTit {
		color: #fff;
		font-size: .16rem;
	}

	.showhengListColor {
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		padding: 0 .2rem;
		margin: 0 .2rem;
	}

	.shubiao1 {
		color: #fff;
		font-size: .14rem;
		position: absolute;
		left: .06rem;
		top: -.2rem;
	}

	.shubiao2 {
		color: #fff;
		font-size: .14rem;
		position: absolute;
		right: 0;
		top: -.2rem;
	}

	.heng1 {
		display: block;
		width: 1.2rem;
		height: .12rem;
		/* background: linear-gradient(to right, #fff, #36ffcb); */
		background: #36ffcb;
	} 

	.heng2 {
		display: block;
		width: 1.2rem;
		height: .12rem;
		/* background: linear-gradient(to right, #fff, yellow); */
		background: #Fdd000 ;
	}
</style>
